<template>
  <view class="content">
    <!-- 搜索组件 -->
    <navsearch></navsearch>
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      asing-function="easeInOutCubic "
      circular
    >
      <swiper-item v-for="item in swiperList" :key="item.goods_id"
        ><image
          :src="item.image_src"
          mode="widthFix"
          class="swiper-item-img"
        ></image
      ></swiper-item>
    </swiper>
    <!-- 菜单导航 -->
    <view class="nav">
      <navigator class="nav-item" v-for="(item, index) in navList" :key="index">
        <image :src="item.image_src" mode="widthFix"></image>
      </navigator>
    </view>
    <!-- 楼层数据 -->
    <view class="floor" v-for="(item, index) in floors" :key="index">
      <!-- 标题 -->
      <view class="floor_title">
        <image mode="widthFix" :src="item.floor_title.image_src"></image
      ></view>
      <!-- 内容 -->
      <view class="floor_content">
        <navigator
          class="floor_item"
          v-for="(item2, index2) in item.product_list"
          :key="index2"
        >
          <image floor_img :src="item2.image_src"></image> </navigator
      ></view>
    </view>
  </view>
</template>

<script>
import navsearch from "@/components/navsearch.vue";
export default {
  data() {
    return {
      swiperList: [], // 轮播图数据
      navList: [], // 导航菜单
      floors: [], //楼层数据
    };
  },
  components: {
    navsearch,
  },
  async onLoad() {
    uni.showLoading({
      title: "加载中",
    });
    // 获取轮播图数据
    this.getSwiper();
    // 获取导航菜单数据
    this.getNav();
    // 请求楼层数据
    this.getFlooer();
    Promise.all([this.getSwiper(), this.getNav(), this.getFlooer()]).then(
      (res) => {
        uni.hideLoading();
      }
    );
  },
  methods: {
    // 获取轮播图数据
    getSwiper() {
      return uni
        .request({
          url:
            "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
        })
        .then((res) => {
          console.log(res);
          this.swiperList = res[1].data.message;
        });
    },
    // 获取导航菜单数据
    getNav() {
      return uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
        })
        .then((res) => {
          console.log(res);
          this.navList = res[1].data.message;
        });
    },
    // 楼层数据请求
    getFlooer() {
      return uni
        .request({
          url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
        })
        .then((res) => {
          console.log(res[1]);
          this.floors = res[1].data.message;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 340rpx;
  swiper-item {
    .swiper-item-img {
      height: 340rpx;
      width: 100%;
    }
  }
}
.nav {
  display: flex;
  .nav-item {
    flex: 1;
    padding: 30rpx;
    image {
      width: 128rpx;
      height: 140rpx;
    }
  }
}
.floor {
  .floor_title {
    width: 750rpx;
    height: 60rpx;
    margin: 10rpx;
  }
  .floor_content {
    overflow: hidden;
    padding-left: 10rpx;
    .floor_item {
      float: left;
      width: 233rpx;
      height: 188rpx;
      margin-left: 10rpx;
      margin-bottom: 26rpx;
      &:nth-child(1) {
        height: 400rpx;
      }
      image {
        height: 100%;
      }
    }
  }
}
</style>
